import Taro, { Config } from '@tarojs/taro'
import { Text, View } from '@tarojs/components'
import { AtAvatar } from "taro-ui";
import './my.scss'
import Grid from "../../components/Grid/Grid";

interface MyState {
    value: string;
}

export default class My extends Taro.Component {

    /**
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */
    config: Config = {
        navigationBarTitleText: '我的'
    };

    state = {
        value: ''
    } as MyState;

    constructor() {
        super();
        this.state = {
            value: ''
        }
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillUnmount() {
    }

    componentDidShow() {
    }

    componentDidHide() {
    }

    render() {
        return (
            <View>
                <View className='my content color-card'>
                    <View className="user_info">
                        <AtAvatar className="avatar" circle image={'http://makefriends.bs2dl.yy.com/%E6%A6%9C%E5%8D%95.png'}/>
                        <Text className="username">test</Text>
                    </View>
                </View>
                <View className='my content'>
                    <View className="info_view">
                        <View className="bio">111</View>
                        <View className="item_view">
                            <View className="item">
                                <View className="title">50</View>
                                <View className="desc">starts</View>
                            </View>
                            <View className="line" />
                            <View className="item">
                                <View className="title">100</View>
                                <View className="desc">Followers</View>
                            </View>
                            <View className="line" />
                            <View className="item">
                                <View className="title">122</View>
                                <View className="desc">Following</View>
                            </View>
                        </View>
                    </View>
                    <View className="list_view">
                        <View className="list">
                            <View className="list_title">Email</View>
                            <View className="list_content">--</View>
                        </View>
                        <View className="list">
                            <View className="list_title">Blog</View>
                            <View className="list_content">--</View>
                        </View>
                        <View className="list">
                            <View className="list_title">Location</View>
                            <View className="list_content">--</View>
                        </View>
                    </View>
                </View>
                <View className='my' style={{'margin': '15px 0 0 0'}}>
                    <Grid
                        columnNum={3}
                        bold={true}
                        iconSize={0.3}
                        className='width-95'
                        data={
                            [
                                {
                                    image: 'http://makefriends.bs2dl.yy.com/%E4%B9%A6%E5%9F%8E.png',
                                    value: '关注'
                                },
                                {
                                    image: 'http://makefriends.bs2dl.yy.com/%E6%A6%9C%E5%8D%95.png',
                                    value: '收藏'
                                },
                                {
                                    image: 'http://makefriends.bs2dl.yy.com/%E7%AD%BE%E5%88%B0.png',
                                    value: '任务'
                                },
                                {
                                    image: 'http://makefriends.bs2dl.yy.com/%E5%88%86%E7%B1%BB.png',
                                    value: '商城'
                                },
                                {
                                    image: 'http://makefriends.bs2dl.yy.com/%E5%88%86%E7%B1%BB.png',
                                    value: '草稿'
                                },
                                {
                                    image: 'http://makefriends.bs2dl.yy.com/%E5%88%86%E7%B1%BB.png',
                                    value: '历史'
                                },
                                {
                                    image: 'http://makefriends.bs2dl.yy.com/%E5%88%86%E7%B1%BB.png',
                                    value: '关于'
                                }
                            ]
                        }/>
                </View>
                <View className="bottom_view"/>
            </View>
        )
    }
}
